<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-cn">
<html>
    <head>
        <%
            String rootPath = request.getContextPath();
            request.setAttribute("rootPath", rootPath);
        %>
        <title>征程</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Bootstrap -->
        <link href="${rootPath}/static/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" media="screen">
        <link href="${rootPath}/static/bootstrap/3.3.7/css/bootstrap-theme.css" rel="stylesheet" media="screen">
        <link href="${rootPath}/static/bootstrap/3.3.7/css/bootstrap-admin-theme.css" rel="stylesheet" media="screen">
        <link rel="stylesheet" href="${rootPath}/static/my/css/style.css">

    </head>
    <body class="bootstrap-admin-with-small-navbar">
    <nav class="navbar navbar-default navbar-inverse navbar-fixed-top " role="navigation">
        <div class="container">
            <div class="row">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">后台管理</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="${rootPath}/index/show">前台</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">管理员<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">账户中心</a></li>
                                <li class="divider"></li>
                                <li><a href="#">退出登录</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div>
        </div>
    </nav>

        <div class="container">
            <!-- left, vertical navbar & content -->
            <div class="row">
                <!-- left, vertical navbar -->
                <div class="col-md-2 bootstrap-admin-col-left">
                    <ul class="nav navbar-collapse collapse bootstrap-admin-navbar-side">
                        <li>
                            <a href="${rootPath}/manage/index/showback"> 友链</a>
                        </li>
                        <li class="active">
                            <a href="${rootPath}/manage/video/showback"> 视频</a>
                        </li>
                        <li>
                            <a href="${rootPath}/manage/msg/showback"> 留言</a>
                        </li>
                        <li>
                            <a href="${rootPath}/manage/user/showback/"> 用户</a>
                        </li>
                    </ul>
                </div>

                <!-- content -->
                <div class="col-md-10">
                    <div class="row bootstrap-admin-no-edges-padding">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="text-muted bootstrap-admin-box-title">通知</div>
                                </div>
                                <div class="bootstrap-admin-panel-content table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th><input type="checkbox" id="all"></th>
                                            <th>书名</th>
                                            <th>作者</th>
                                            <th>描述</th>
                                            <th>链接</th>
                                            <th>分类</th>
                                        </tr>
                                        </thead>
                                        <tbody id="list">
                                        <c:forEach items="${videoList}" var="item" varStatus="status">
                                            <tr>
                                                <td>${status.index + 1}</td>
                                                <td><input type="checkbox" value="${item.id}" name="checkbox"></td>
                                                <td>${item.name}</td>
                                                <td>${item.author}</td>
                                                <td>${item.description}</td>
                                                <td>${item.link}</td>
                                                <td>${item.category}</td>
                                            </tr>
                                        </c:forEach>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="put-btn1">
                                    总共${pageSum}页&nbsp;&nbsp;&nbsp;&nbsp;
                                    <c:if test="${pageNum > 1}">
                                        <a href="${rootPath}/manage/video/jumpback?pageNum=${pageNum-1}">上一页</a>
                                    </c:if>
                                    第${pageNum}页
                                    <c:if test="${pageNum < pageSum}">
                                        <a href="${rootPath}/manage/video/jumpback?pageNum=${pageNum+1}">下一页</a>
                                    </c:if>&nbsp;&nbsp;&nbsp;&nbsp;
                                    去第<input type="text" size="2" id="jumppage">页&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input class="btn btn-default" type="button" value="跳转" id="jump">
                                    <input class="btn btn-default" type="button" value="删除" id="delete">
                                    <input class="btn btn-default" type="button" value="修改" id="modify" data-toggle="modal" data-target="#myModal">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel">修改书籍</h4>
                                </div>
                                <div class="modal-body">
                                    <form method="post" action="${rootPath}/manage/video/update" id="updatenotice">
                                        <div class="form-group">
                                            <label for="video-name" class="control-label">书名</label>
                                            <input type="hidden" id="video-id" name="id">
                                            <input type="text" class="form-control" id="video-name" name="name">
                                        </div>
                                        <div class="form-group">
                                            <label for="video-author" class="control-label">作者</label>
                                            <input type="text" class="form-control" id="video-author" name="author">
                                        </div>
                                        <div class="form-group">
                                            <label for="video-desc" class="control-label">描述</label>
                                            <input type="text" class="form-control" id="video-desc" name="description">
                                        </div>
                                        <div class="form-group">
                                            <label for="video-link" class="control-label">链接</label>
                                            <input type="text" class="form-control" id="video-link" name="link">
                                        </div>
                                        <div class="form-group">
                                            <label for="video-cate" class="control-label">分类</label>
                                            <input type="text" class="form-control" id="video-cate" name="category">
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="submit" class="btn btn-primary" id="updateBtn">保存修改</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="panel panel-default bootstrap-admin-no-table-panel">
                            <div class="panel-heading">
                                <div class="text-muted bootstrap-admin-box-title">新增书籍</div>
                            </div>
                            <div class="bootstrap-admin-no-table-panel-content bootstrap-admin-panel-content collapse in">
                                <form class="form-horizontal" method="post" action="${rootPath}/manage/video/add">
                                    <fieldset>
                                        <div class="form-group">
                                            <label class="col-lg-1 control-label">名字</label>
                                            <div class="col-lg-11">
                                                <input class="form-control" id="time" type="text" name="name">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-1 control-label">作者</label>
                                            <div class="col-lg-11">
                                                <input class="form-control" id="author" type="text" name="author">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-1 control-label">描述</label>
                                            <div class="col-lg-11">
                                                <input class="form-control" id="address" type="text" name="description">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-1 control-label">链接</label>
                                            <div class="col-lg-11">
                                                <input class="form-control" id="link" type="text" name="link">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-1 control-label">类别</label>
                                            <div class="col-lg-11">
                                                <input class="form-control" id="content" type="text" name="category">
                                            </div>
                                        </div>
                                    </fieldset>
                                    <div class="put-btn">
                                        <button type="submit" class="btn btn-default">新增书籍</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="row">
                <hr>
                <footer role="contentinfo">
                    <p>&copy; 2017 <a href="#" target="_blank">征程</a></p>
                </footer>
            </div>
        </div>

    <script type="text/javascript" src="${rootPath}/static/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="${rootPath}/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <script type="text/javascript">
            //全选checkbox
            $("#all").click(function () {
                if (this.checked) {
                    $("#list :checkbox").prop("checked",true);
                } else {
                    $("#list :checkbox").prop("checked",false);
                }
            })
            // 删除选中的比赛，并且刷新页面
            $("#delete").click(function () {
                var idArray = new Array();
                $('input[name="checkbox"]:checked').each(function () {
                    idArray.push($(this).val());
                }) ;
                var idStr = idArray.join(',');
                $.ajax({
                    type : 'POST',
                    url : "${rootPath}/manage/video/delete",
                    data: 'jsonStr=' + idStr,
                    success : function () {
                        //删除完数据重新刷新页面
                        window.location.href = "${rootPath}/manage/video/showback";
                    },
                    error : function () {
                        //删除完数据重新刷新页面
                        window.location.href = "${rootPath}/manage/video/showback";
                    }
                })
            });
            //修改比赛
            $("#modify").click(function () {
                var id = $("#list input[type=checkbox]:checked").prop("value");
                var $tr = $("#list input[type=checkbox]:checked").parent().parent();
                var name = $($tr.children("td").get(2)).text();
                var author = $($tr.children("td").get(3)).text();
                var description = $($tr.children("td").get(4)).text();
                var link = $($tr.children("td").get(5)).text();
                var category = $($tr.children("td").get(6)).text();
                $("#video-id").val(id);
                $("#video-name").val(name);
                $("#video-author").val(author);
                $("#video-desc").val(description);
                $("#video-link").val(link);
                $("#video-cate").val(category);
            });
            //提交修改的表单
            $("#updateBtn").click(function () {
                $("#updatenotice").submit();
            })
            //跳转页面
            $("#jump").click(function () {
                val = $("#jumppage").val();
                if (val >= 1 && val <= ${pageSum}) {
                    window.location.href="${rootPath}/manage/video/jumpback?pageNum="+val;
                }
            })
        </script>
    </body>
</html>
